<template>
	<view class="pagebox">
		<backtop />
		<view class="top-box" :style="{height:`${obj.wh.navHeight}px`}"></view>
		<view class="userbox flex-row-center" @click="proxy.$c.go_url('/pages/userinfo')">
			<view class="head"> <image :src="obj.u.head?`${proxy.$c.fileHost}head/${obj.u.head}`:'../static/logo.png'" mode="aspectFill"></image> </view>
			<view class="flex-column flex1">
				<view class="name mb5">{{obj.u.nickname||obj.u.name||'用户3515'}}</view>
				<view class="phone">{{obj.u.mobile||'用户3515'}}</view>
			</view>
			<image class="seticon" src="../static/25.png" mode="aspectFill"></image>
		</view>
		<view class="pd30">
			<view class="card flex-row wrap">
				<view class="tabitem flex-column-center" v-for="(v,i) in obj.tabs" :key="i" @click="tabclick(v)">
					<image class="tabicon mb20" :src="`../static/${v.icon}.png`" mode="aspectFill"></image>
					<view class="title">{{v.title}}</view>
					<view class="spot flex-center" v-if="obj.isnews&&i==1"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,watch } from 'vue'
	import { onLoad,onShow,onUnload,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll,onHide } from '@dcloudio/uni-app';

    let { proxy } = getCurrentInstance()
	let obj = reactive({
		wh: proxy.$c.getglobal(),
		u: {},
		tabs: [
			{title: '历史会话', url: '/pages/chartHistory', icon: '4'},
			{title: '历史询盘', url: '/pages/inquiryHistory', icon: '46'},
		],
		Interval: null,
		isnews: false
	})
	
	onShow(()=>{
		init()
		initInterval()
	})
	
	onHide(()=>{
		clearInterval(obj.Interval)
		obj.Interval = null
	})
	
	onUnload(()=>{
		clearInterval(obj.Interval)
		obj.Interval = null
	})
	
	const init=()=>{
		getuser()
	}
	
	const getuser=()=>{
		proxy.$reQuest.post('mp/user/get',{},{token: true,noOut:true},).then(d=>{
			obj.u = d.msg||{}
		}).catch(err=>{})
	}
	
	const tabclick=(v)=>{
		proxy.$c.go_url(v.url)
	}
	
	const initInterval=()=>{
		if(obj.Interval){
			clearInterval(obj.Interval)
			obj.Interval = null
		}
		getnews()
		obj.Interval = setInterval(()=>{
			getnews()
		},2000)
	}
	
	const getnews=()=>{
		proxy.$reQuest.post('mp/product/inquiry/room',obj.req,{token: true,noOut:true},).then(d=>{
			if(d.success){
				let isnews = false
				for (let i = 0; i < d.msg.list.length; i++) {
					const e = d.msg.list[i]
					if(e.cou&&!isnews){
						isnews = true
					}
				}
				obj.isnews = isnews
			}else{obj.isnews = false}
		}).catch(err=>{obj.isnews = false})
	}
</script>

<style lang="scss" scoped>
.pagebox{
	width: 100vw;height: 100vh;overflow-y: auto;
	background: linear-gradient( 86deg, #E2EEFF 0%, #EAECFF 100%);
	.top-box{width: 100vw;}
	.userbox{
		width: 100vw;padding: 30rpx;box-sizing: border-box;
		.head{
			width: 120rpx;height: 120rpx;border-radius: 120rpx;margin-right: 20rpx;
			image{width: 120rpx;height: 120rpx;border-radius: 120rpx;}
		}
		.name{font-size: 36rpx;font-weight: bold;}
		.phone{font-size: 26rpx;}
		.seticon{width: 30rpx;height: 30rpx;}
	}
	.card{
		width: 100%;height: auto;border-radius: 20rpx;background-color: #fff;padding: 30rpx 30rpx 0;box-sizing: border-box;
		.tabitem{
			position: relative;
			width: 25%;margin-bottom: 30rpx;
			.tabicon{width: 50rpx;height: 50rpx;}
			.title{font-size: 26rpx;}
			.spot{position: absolute;right: 30rpx;top: 0rpx;z-index: 1;width: 16rpx;height: 16rpx;border-radius: 50%;background-color: red;color: #fff;font-size: 22rpx;}
		}
	}
}
</style>
